let createShiftWrap = () => {
    let div = document.createElement('div')
    div.className = 'shift-course-wrap'
    div.innerHTML = `
        <div class='shift-course-wrap-title'>
            <span>把尚未使用的课时转给其他老师，课时会根据新老师的价格重新计算</span>
            <i class='iconfont icon-chahao shift-close'></i>
        </div>
        <div class='shift-course-wrap-title2'>课时转移</div>
        <div class='shift-course-wrap-title3'>课时会根据新老师的价格重新计算</div>
        <div class='shift-course-wrap-teacher' style='margin-top:22px'>
            <div class='shift-course-wrap-teacher-left'>转移课时从</div>
            <div class='shift-course-wrap-teacher-right-wrap '>
                <div class='shift-course-wrap-teacher-right'>
                    <img src='/static/anquan.png' width='39' height='39' style='border-radius:50%'/>
                    <div>kerri Y.</div>
                    <div class='teacher-right-price'>$8.00/hr</div>
                    <i class='iconfont icon-xiangxia allow-drop'></i>
                </div>
                <div class='shift-course-wrap-teacher-right-select shift-course-wrap-teacher-list-one'>
                    <div class='shift-course-wrap-teacher-right shift-course-wrap-teacher-right-select-list'>
                        <img src='/static/anquan.png' width='39' height='39' style='border-radius:50%'/>
                        <div>kerri Y.</div>
                        <div class='teacher-right-price'>$8.00/hr</div>
                    </div> 
                    <div class='shift-course-wrap-teacher-right shift-course-wrap-teacher-right-select-list'>
                        <img src='/static/anquan.png' width='39' height='39' style='border-radius:50%'/>
                        <div>kerri Y.</div>
                        <div class='teacher-right-price'>$8.00/hr</div>
                    </div> 
                </div>
            </div>
        </div>
        <div class='shift-course-wrap-teacher'>
            <div class='shift-course-wrap-teacher-left'>转移课时给</div>
            <div class='shift-course-wrap-teacher-right-wrap '>
                <div class='shift-course-wrap-teacher-right'>
                    <img src='/static/anquan.png' width='39' height='39' style='border-radius:50%'/>
                    <div>kerri Y.</div>
                    <div class='teacher-right-price'>$8.00/hr</div>
                    <i class='iconfont icon-xiangxia allow-drop'></i>
                </div>
                <div class='shift-course-wrap-teacher-right-select shift-course-wrap-teacher-list-two'>
                    <div class='shift-course-wrap-teacher-right shift-course-wrap-teacher-right-select-list'>
                        <img src='/static/anquan.png' width='39' height='39' style='border-radius:50%'/>
                        <div>kerri Y.</div>
                        <div class='teacher-right-price'>$8.00/hr</div>
                    </div> 
                    <div class='shift-course-wrap-teacher-right shift-course-wrap-teacher-right-select-list'>
                        <img src='/static/anquan.png' width='39' height='39' style='border-radius:50%'/>
                        <div>kerri Y.</div>
                        <div class='teacher-right-price'>$8.00/hr</div>
                    </div> 
                </div>
            </div>
        </div>
        <div class='shift-course-wrap-reason'>
            <div class='shift-course-wrap-teacher-left'>理由</div>
            <select>
                <option>
                    <span style='color:#898989'>老师没有达到我的预想</span>
                </option>
                <option>
                    <span style='color:#898989'>其他</span>
                </option>
            </select>
        </div>
        <div class='shift-course-ensure'>确认</div>
    `
    document.body.appendChild(div)

    $('.shift-close')[0].addEventListener('click', () => {
        $('.shift-course-wrap')[0].remove()
        $('#mask').hide()
        $('#mask')[0].style.zIndex = '-1'
    })

    $('.allow-drop')[0].addEventListener('click', () => {
        $('.shift-course-wrap-teacher-list-one').slideToggle()
    })

    $('.allow-drop')[1].addEventListener('click', () => {
        $('.shift-course-wrap-teacher-list-two').slideToggle()
    })
}

export {
    createShiftWrap
}
